<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 视口viewport 的设置 -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="width=750,target-densitydpi=device-dpi,maximum-scale=1.0, user-scalable=no">
    <script type="text/javascript">
        function setWidth(e) {
            if (/Andriod/i.test(navigator.userAgent)) {
                var f, d = window.innerWidth;
                (d != e) && (f = d / e), document.addEventListener("DOMContentLoaded", function() {
                    var a = document.getElementsByTagName("body")[0];
                    a.style.webkitTransformOrigin = "left top";
                    a.style.webkitTransform = "scale(" + f + ")"
                }, !1)
            }
        }
        setWidth(750);
    </script>
    <title>首页</title>
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/index.css">
    <!-- 这个js文件不要加 -->
    <!-- <script src="./assets/js/winResponsive.js"></script> -->
    <link rel="stylesheet" href="./libs/css/swiper.min.css">
</head>

<body>
    <div class="container">
        <!-- 头部 -->
        <header>
            <div class="header clearfix">
                <h3 class="pos pull-left">全国</h3>
                <div class="right pull-right">
                    <img src="./assets/images/saoma.png" alt="">
                    <img src="./assets/images/sousuo.png" alt="">
                    <img src="./assets/images/kefu.png" alt="">
                </div>
                <!-- 清除浮动的一个标签 -->
                <!-- <div class="clearfix"></div> -->
            </div>
        </header>

        <!-- banner -->
        <section>
            <div class="banner">
                <div class="swiper-container banner-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href=""><img src="./assets/images/banner1.png" alt=""></a>
                        </div>
                        <div class="swiper-slide">
                            <a href=""><img src="./assets/images/banner1.png" alt=""></a>
                        </div>
                        <div class="swiper-slide">
                            <a href=""><img src="./assets/images/banner1.png" alt=""></a>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </section>

        <!-- 菜单 -->
        <section>
            <div class="menu-row">
                <div class="menu">
                    <img src="./assets/images/kecheng.png" alt="">
                    <p>课程</p>
                </div>
                <div class="menu">
                    <img src="./assets/images/tushu.png" alt="">
                    <p>图书</p>
                </div>
                <div class="menu">
                    <img src="./assets/images/libao.png" alt="">
                    <p>礼包</p>
                </div>
                <div class="menu">
                    <img src="./assets/images/shequ.png" alt="">
                    <p>社区</p>
                </div>
            </div>
        </section>

        <!-- 公告 -->
        <section>
            <div class="gonggao">
                <img src="./assets/images/tx.png" alt="" class="tx pull-left">
                <div class="content pull-left">
                    <div class="swiper-container gonggao-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">2019云南省大理州事业单位招聘公告</div>
                            <div class="swiper-slide">2019云南省大理州事业单位招聘公告</div>
                            <div class="swiper-slide">2019云南省大理州事业单位招聘公告</div>
                        </div>
                    </div>
                </div>
                <a href="" class="iconfont pull-right">&#xe6a3;</a>
                <!-- <i class="iconfont">&#xe61d;</i> -->
                <!-- <i class="iconfont">&#xe61f;</i> -->
                <div class="clearfix"></div>
                <!-- 清除浮动 -->
            </div>
        </section>

        <!-- banner -->
        <section>
            <div class="banner banner2">
                <div class="swiper-container banner2-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href=""><img src="./assets/images/banner2.png" alt=""></a>
                        </div>
                        <div class="swiper-slide">
                            <a href=""><img src="./assets/images/banner2.png" alt=""></a>
                        </div>
                        <div class="swiper-slide">
                            <a href=""><img src="./assets/images/banner2.png" alt=""></a>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </section>

        <section>
            <div class="title clearfix">
                <h3 class="pull-left">公开课</h3>
                <a href="" class="pull-right">更多<i class="iconfont">&#xe61f;</i></a>
            </div>
        </section>

        <section>
            <div class="swiper-container course-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="course">
                            <div class="teacher">
                                <img src="./assets/images/teacher.png" alt="">
                                <p class="time">19:00</p>
                            </div>
                            <h3 class="name">2019安徽教师资格模拟卷综，模拟卷综</h3>
                            <div class="bottom clearfix">
                                <ul class="pull-left">
                                    <li><img src="./assets/images/teacher.png" alt=""></li>
                                    <li><img src="./assets/images/teacher.png" alt=""></li>
                                    <li><img src="./assets/images/teacher.png" alt=""></li>
                                    <li><i class="iconfont">&#xe6a3;</i></li>
                                </ul>
                                <p class="pull-left">1579人预约了课程</p>
                                <button type="button" class="pull-right">预约</button>
                                <!-- 填充一个清除浮动 -->
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="course">
                            <div class="teacher">
                                <img src="./assets/images/teacher.png" alt="">
                                <p class="time">19:00</p>
                            </div>
                            <h3 class="name">2019安徽教师资格模拟卷综，模拟卷综</h3>
                            <div class="bottom clearfix">
                                <ul class="pull-left">
                                    <li><img src="./assets/images/teacher.png" alt=""></li>
                                    <li><img src="./assets/images/teacher.png" alt=""></li>
                                    <li><img src="./assets/images/teacher.png" alt=""></li>
                                    <li><i class="iconfont">&#xe6a3;</i></li>
                                </ul>
                                <p class="pull-left">1579人预约了课程</p>
                                <button type="button" class="pull-right">预约</button>
                                <!-- 填充一个清除浮动 -->
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="course">
                            <div class="teacher">
                                <img src="./assets/images/teacher.png" alt="">
                                <p class="time">19:00</p>
                            </div>
                            <h3 class="name">2019安徽教师资格模拟卷综，模拟卷综</h3>
                            <div class="bottom clearfix">
                                <ul class="pull-left">
                                    <li><img src="./assets/images/teacher.png" alt=""></li>
                                    <li><img src="./assets/images/teacher.png" alt=""></li>
                                    <li><img src="./assets/images/teacher.png" alt=""></li>
                                    <li><i class="iconfont">&#xe6a3;</i></li>
                                </ul>
                                <p class="pull-left">1579人预约了课程</p>
                                <button type="button" class="pull-right">预约</button>
                                <!-- 填充一个清除浮动 -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Add Pagination -->
                <!-- <div class="swiper-pagination"></div> -->
            </div>
        </section>

        <section>
            <div class="title title2">
                <h3>热门推荐</h3>
            </div>
        </section>

        <section>
            <div class="course-list">
                <!-- course_list courseList -->
                <img class="cover" src="./assets/images/c_cover1.png" alt="">
                <div class="content">
                    <h4>浙江招教暑假训练营之战后复盘</h4>
                    <p class="clearfix"><span>¥19800.00</span> <a href="" class="pull-right">可试听</a></p>
                </div>
            </div>
            <div class="course-list">
                <!-- course_list courseList -->
                <img class="cover" src="./assets/images/c_cover2.png" alt="">
                <div class="content">
                    <h4>浙江招教暑假训练营之战后复盘</h4>
                    <p class="clearfix"><span>¥19800.00</span> <a href="" class="pull-right">可试听</a></p>
                </div>
            </div>
            <div class="course-list last-course-list">
                <!-- course_list courseList -->
                <img class="cover" src="./assets/images/c_cover3.png" alt="">
                <div class="content">
                    <h4>浙江招教暑假训练营之战后复盘</h4>
                    <p class="clearfix"><span>¥19800.00</span> <a href="" class="pull-right">可试听</a></p>
                </div>
            </div>
        </section>
    </div>

    <nav>
        <div class="nav">
            <ul>
                <!-- 父标签设置弹性布局 -->
                <li>
                    <!-- li标签可以比作div盒子标签 -->
                    <a href="index.html">
                        <img src="./assets/images/home_hover.png" alt="">
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/dianbo.png" alt="">
                        <p>点播</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/question.png" alt="">
                        <p>题目</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/live.png" alt="">
                        <p>直播</p>
                    </a>
                </li>
                <li>
                    <a href="my1.html">
                        <img src="./assets/images/my.png" alt="">
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

    <script src="./libs/js/swiper.min.js"></script>
    <script>
        // 初始化Swiper
        var b_mySwiper = new Swiper('.banner-container', {
            loop: true, // 循环模式选项
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
        })
        var g_mySwiper = new Swiper('.gonggao-container', {
            loop: true, // 循环模式选项
            autoplay: {
                delay: 1000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
            direction: 'vertical', // 垂直切换选项
        })
        var b2_mySwiper = new Swiper('.banner2-container', {
            loop: true, // 循环模式选项
            autoplay: {
                delay: 4000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
        })
        var swiper = new Swiper('.course-container', {
            loop: true, // 循环模式选项
            slidesPerView: 'auto',
            // centeredSlides: true,
            spaceBetween: 30,
            /* 每个容器之间的距离 margin-right: 30px*/
            // pagination: {
            //     el: '.swiper-pagination',
            //     clickable: true,
            // },
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
        });
    </script>
</body>

</html>